<template>
  <div class="table-head-container">
    <!-- 如果没有选择下面的记录，就显示场景和高级筛选-->
    <flexbox v-show="elTableOption.selectionList.length == 0" class="th-container">
      <SceneView @handle="handleHandle" @filter="handleFilter" @scene="handleScene"></SceneView>
    </flexbox>
    <!-- 如果选择了下面的记录，就显示对应的菜单 -->
    <flexbox v-if="elTableOption.selectionList.length > 0" class="selection-bar">
      <SelectionView @handle="handleHandle" @actionClick="handleAction"></SelectionView>
    </flexbox>

  </div>
</template>


<script setup>
import {ref, watch, getCurrentInstance} from "vue"
import {vLoading as Loading} from 'element-plus/dist/index.full.js'
import {
  crmOptionKey,
  elTableOptionKey, sceneDataKey, tableHeadPoolIdKey,
  tableHeadSortDataKey
} from "/src/views/crm/componentsNew/SzCrud/keys";
import SceneView from "@/views/crm/componentsNew/SzCrud/tableHead/SceneView.vue";
import SelectionView from "@/views/crm/componentsNew/SzCrud/tableHead/SelectionView.vue";

defineOptions({
  name: 'SzTableHead'
})

const properties = defineProps({
  poolId: [String, Number],
  // 公海权限
  poolAuth: Object,
  // 排序信息
  sortData: Object,
  // 自定义操作
  handleFun: Function
})

const emits = defineEmits({
  'filter': null,
  'scene': null,
  'handle': null,
  'action': null
})

const crmOption = inject(crmOptionKey)

provide(tableHeadSortDataKey, properties.sortData)
provide(tableHeadPoolIdKey, properties.poolId)


const loading = ref(false) // loading
const loadingObj = ref(null) // loading 对象

const elTableOption = inject(elTableOptionKey)

const sceneData = reactive({id: '', bydata: '', name: ''})
provide(sceneDataKey, sceneData)

function handleScene(data) {
  emits('scene', data)
}

function handleFilter(data) {
  emits('filter', data)
}

/** 勾选后的表头操作 */
function headSelectionChange(array) {
  elTableOption.selectionList = array
}

function handleHandle(data) {
  emits('handle', data)
}

function handleAction(data) {
  emits("action", data)
}


watch(loading, (val) => {
  if (val) {
    loadingObj.value = Loading.service({
      target: document.querySelector('#crm-main-container')
    })
  } else {
    loadingObj.value && loadingObj.value.close()
  }
})


// 对外暴露，供HookElTable中调用
defineExpose({
  headSelectionChange
})
</script>

<style lang="scss" scoped>
.table-head-container {
  border-bottom: 1px solid #e6e6e6;
}

.th-container {
  font-size: 13px;
  height: 50px;
  padding: 0 20px;
}


/** 勾选操作 */
.selection-bar {
  font-size: 12px;
  height: 50px;
  padding: 0 20px;
  color: #777;
}
</style>
